<template>
	<view class="u-time-axis-item" :style="{color: nodeIndex == 0 ? $theme.mainColor : $theme.contentColor}">
		<view class="u-time-axis-node" :style="{top: nodeIndex == 0 ? '2rpx' : '12rpx'}">
			<view class="u-node" v-if="nodeIndex == 0" :style="{background: $theme.primary}">
				<!-- 此处为uView的icon组件 -->
				<w-icon :name="icon" color="#fff" :size="24"></w-icon>
			</view>
			<view class="u-dot" v-else></view>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	/**
	 * timeLineItem 时间轴Item
	 */
	export default {
		name: 'mm-time-line-item',
		props: {
			// 节点层级，0显示大圆，1显示小点
			nodeIndex: {
				type: [Number, String],
				default: 0
			},
			// 大圆内图标
			icon: {
				type: String,
				default: 'pushpin-fill'
			}
		},
		data() {
			return {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-time-axis-item {
		display: flex;
		flex-direction: column;
		width: 100%;
		position: relative;
		margin-bottom: 30rpx;
	}

	.u-time-axis-node {
		position: absolute;
		top: 12rpx;
		left: -40rpx;
		transform-origin: 0;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1;
		font-size: 24rpx;
	}

	.u-dot {
		height: 10px;
		width: 10px;
		border-radius: 100rpx;
		background: #ddd;
	}
	
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.u-order-title {
		font-weight: bold;
		font-size: 32rpx;
		line-height: 44rpx;
		height: 44rpx;
	}
</style>
